<template>
  <div class="play-list">
    <el-table :data="playList" max-height="520" height="520" :empty-text="playTableEmptyText" :row-class-name="tableRowClassName" ref="playListTable" @selection-change="handleSelectionChangeByPlayList">
      <el-table-column type="index" width="50" align="center">
        <template slot-scope="scope">
          <span v-if="scope.$index !== currentPlayMusicIndex">{{ scope.$index + 1 }}</span>
          <span v-else><i class="el-icon-caret-right"></i></span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="歌曲" width="160" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="loved" label="" width="200">
        <template slot-scope="scope">
          <i class="el-icon-video-play option-btn" title="播放" @click="playMusic(scope.row)"></i>
          <i class="el-icon-star-off option-btn" title="添加收藏" v-if="!scope.row.loved" @click="collectMusic(scope.row)"></i>
          <i class="el-icon-star-on option-btn" style="font-size: 26px !important; color: crimson !important;" title="取消收藏" @click="cancelCollectMusic(scope.row)" v-else></i>
          <i class="el-icon-delete option-btn" title="删除" @click="handleDeleteCurrentSelecedOne(scope.row.time)"></i>
        </template>
      </el-table-column>
      <el-table-column prop="artist" label="歌手" width="160" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="sourceId" label="来源" width="80" class="music-source">
        <template slot-scope="scope">
          <img class="source-icon" :src="sourceIcon(scope.row.sourceId)" alt="">
        </template>
      </el-table-column>
      <el-table-column type="selection" min-width="40" align="right" v-if="editShow" title="全选">
      </el-table-column>
      <el-table-column label="" min-width="40" align="left" v-if="editShow" class="animate__animated animate__bounceInRight">
        <template slot="header">
          <el-button class="editor-btn delete" icon="el-icon-delete" circle title="删除" @click="handleDeleteSelectedMusic"></el-button>
        </template>
      </el-table-column>
      <el-table-column label="编辑" :min-width="editShow ? 35 : 130" align="right">
        <template slot="header">
          <el-button class="editor-btn editor" icon="el-icon-edit" circle title="编辑" @click="handlerEdit"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { formatLyricsByKuGou } from '../api/KuGou'
import { formatLyricsByMiGU } from '../api/MiGu'
import { formatLyricsByNetease } from '../api/Netease'
export default {
  props: {
    searchChooseList: {
      type: Array,
      required: true
    }
  },
  computed: {
    // 绑定store中的变量
    ...mapState([
      'currentSongImg',
      'currentLyrics',
      'currentPlayMusicIndex',
      'playList',
      'lovedList',
      'currentLyrics',
      'isPlaying',
    ])
  },
  watch: {
    playList: {
      handler (newVal, oldVal) {
        localStorage.setItem('userPlayList', JSON.stringify(newVal))
      },
      immediate: false
    }
  },
  data () {
    return {
      editShow: false, // 多选框展示
      playTableEmptyText: '播放列表，啥也没有。',
      multipleSelectionPlayList: [], // 播放列表选中项数组
    }
  },
  mounted () {
    if (localStorage.getItem('userPlayList')) {
      this.savePlayList(JSON.parse(localStorage.getItem('userPlayList')))
    }
  },
  methods: {
    // 绑定歌曲列表删除方法
    ...mapMutations([
      'savePlayList',
      'add2PlayList',
      'add2LovedList',
      'updateLyrics',
      'updateSongIMG',
      'updatePlayIndex',
      'deleteOneFromPlayList',
      'deleteMoreFromPlayList',
      'deleteOneFromLovedList',
    ]),

    // 播放列表当前播放歌曲高亮
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === this.currentPlayMusicIndex) {
        return 'high-light'
      }
      return ''
    },

    // 歌曲链接失效警告
    checkMusicUrl (url) {
      return this.showMessage('歌曲链接失效，试试从其他的站点获取吧')
    },

    // 获得当前播放歌曲索引，根据索引变换切换歌词与图片
    getCurrentIndex (val) {
      this.updateSongIMG(this.playList[val].img)
      this.updatePlayIndex(val)

      // 根据歌词不同来源格式化歌词
      switch (this.playList[val].sourceId) {
        case 0: // 酷狗歌词格式化
          this.updateLyrics(formatLyricsByKuGou(this.playList[val].lyrics))
          break;
        case 1: //  咪咕歌词格式化
          this.updateLyrics(formatLyricsByMiGU(this.playList[val].lyrics, this.playList[val].translateLyrics))
          break;
        case 2: //  QQ歌词格式化
          // this.lyrics = formatLyricsByQQ(this.playList[val].lyrics)
          this.updateLyrics({})
          break;
        case 3: //  网易云歌词格式化
          this.updateLyrics(formatLyricsByNetease(this.playList[val].lyrics, this.playList[val].translateLyrics))
          break;
        case 4: //  酷我没歌词，直接赋空
          this.updateLyrics({})
          break;
        default:
          break;
      }
    },

    // 播放按钮
    playMusic (row) {
      this.getCurrentIndex(this.findIndexByTime(this.playList, row.time))
    },

    // 添加收藏
    collectMusic (row) {
      this.add2LovedList(row)
      row.loved = true
      return this.showMessage('收藏成功')
    },

    // 取消收藏
    cancelCollectMusic (row) {
      this.deleteOneFromLovedList(this.findIndexByTime(this.lovedList, row.time))
      row.loved = false
      return this.showMessage('已取消收藏')
    },

    // 根据不同的souceId显示不同的图标
    sourceIcon (id) {
      let m = this.searchChooseList.findIndex(v => v.n == id)
      return this.searchChooseList[m].i
    },

    // 编辑按钮点击
    handlerEdit () {
      this.editShow = !this.editShow
      this.$nextTick(() => { //删除列后重新渲染表格，防止表格抖动
        this.$refs.playListTable.doLayout()
      })
      if (this.editShow) {
        this.$refs.playListTable.clearSelection()
      }
    },

    // 播放列表歌曲选中触发事件
    handleSelectionChangeByPlayList (val) {
      this.multipleSelectionPlayList = val
    },

    // 播放列表歌曲删除事件
    handleDeleteSelectedMusic () {
      if (this.playList.length === 0) {
        return this.showMessage('播放列表为空')
      }
      this.deleteMoreFromPlayList(this.multipleSelectionPlayList)
      if (this.playList.length === 0) {
        this.resetImgAndLyrics()
      }
      return this.showMessage('删除成功')
    },

    // 歌曲单独删除
    handleDeleteCurrentSelecedOne (time) {
      let i = this.findIndexByTime(this.playList, time)

      // 要删除歌曲索引在当前播放歌曲前或者为列表最后一首歌曲时，播放索引减1
      if ((i < this.currentPlayMusicIndex || i === this.playList.length - 1) && this.currentPlayMusicIndex > 0) this.currentPlayMusicIndex--
      // if(i===this.currentPlayMusicIndex && i===this.playList.length-1)
      this.deleteOneFromPlayList(i)
      this.$nextTick(() => {
        this.$refs.playListTable.doLayout()
      })
      if (this.playList.length === 0) {
        this.resetImgAndLyrics()
      }
      return this.showMessage('删除成功')
    },

    // 若清空播放列表，则重置歌曲封面和歌词
    resetImgAndLyrics () {
      this.updateSongIMG('')
      this.updateLyrics({})
    },

    // 根据歌曲time查找其索引
    findIndexByTime (arr, time) {
      return arr.findIndex(v => {
        return v.time === time
      })
    },

    // 提示信息
    showMessage (text) {
      this.$message({
        dangerouslyUseHTMLString: true,
        center: true,
        duration: 1800,
        message: '<p style="color: #009a61;font-size: 15px;">' + text + '</p>',
      });
    },
  }
}
</script>

<style scoped lang="scss">
@import ".././css/list.scss";
</style>